<template>
  <div id="editor"></div>
</template>
<script lang='ts' setup>
import { onMounted, watch, ref } from 'vue'
import E from 'wangeditor'


const props = defineProps({
    modelValue: {
        type: String,
        default: ''
    }
})
interface EmitsType {
    (e: 'update:modelValue', value: string): void
}

const emit = defineEmits<EmitsType>()
const editor = ref<any>(null)

const unWatchModelValue = watch(() => props.modelValue, (newVal) => {
    if(newVal) {
        editor.value?.txt?.html(newVal)
    }
    unWatchModelValue() // 取消监视
})


const createEditor = () => {
    editor.value = new E('#editor')
    editor.value.config.onChange = () => {
        emit('update:modelValue', editor.value?.txt.html())
    }

    editor.value.config.zIndex = 500
    editor.value.create()
}

onMounted(()=> {
    createEditor()
})

</script>
<style lang='scss' scoped>

</style>